<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="Boostrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="Boostrap/img/bootstrap-icons-1.10.5/font/bootstrap-icons.css" />
	</head>
	<style>
		.breadcrumb-item+.breadcrumb-item::before {
			content: url('Boostrap/img/链接_o.png');
		}
	</style>
	<body>
		<div class="container-fluid">
			<!--眉首导航nav-->
			<nav class="navbar navbar-dark bg-info navbar-expand-lg">
				<!--导航栏-->
				<a class="navbar-brand" href="#">LOGO</a>
				<!--三条杠图标，切换器-->
				<button class="navbar-toggler" data-toggle="collapse" data-target="#navCollapse">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navCollapse">
					<!--导航无序列表ul-->
					<ul class="navbar-nav mr-auto">
						<li class="nav-item"><a class="nav-link" href="/index.html">首页</a></li>
						<!--下拉菜单-->
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" data-toggle="dropdown"
								href="#">选择线路</a>
							<!--下拉二级菜单-->
							<div class="dropdown-menu">
								<a href="/line.html?region=0" class="dropdown-item">国内</a>
								<a href="/line.html?region=1" class="dropdown-item">国外</a>
							</div>
						</li>
						<li class="nav-item"><a id="contactLink" data-placement="bottom" data-html="true" data-trigger="hover" data-content="<img src='Boostrap/img/qrcode.png'>" class="nav-link" href="/tourSite/contact.html">联系我们</a></li>
					</ul>
					<!--内置表单form-->
					<form class="form-inline">
						<input type="text" class="form-control mr-2" placeholder="站内搜索" />
						<button class="btn btn-outline-light">搜索</button>
					</form>
				</div>
			</nav>
			<nav>
				<!--面包屑，去掉默认背景色-->
				<ol class="breadcrumb bg-transparent mb-0">
					<!--导航条目-->
					<li class="breadcrumb-item"><a href="#">欧洲</a></li>
					<li class="breadcrumb-item"><a href="#">美洲</a></li>
					<!--活跃的面包屑导航条目-->
					<li class="breadcrumb-item active">亚洲</li>
				</ol>
			</nav>
			<!--卡片-->
			<div class="card border-0">
				<h4 class="card-header bg-transparent border-0">
					<a href="#" class="badge badge-pill badge-info text-light mr-3">召集中</a>
					英短蓝白-多多bb
				</h4>
				<!--中大屏，水平布局，栅格系统-->
				<div class="card-body row">
					<!--中大屏图占7格-->
					<div class="col-md-7 mb-4">
						<!--图片设置随父元素缩放-->
						<img src="Boostrap/img/JG2.png" alt="" class="img-fluid" style="width: 30rem;">
					</div>
					<!--中大屏，文字参数，图占5格，列表组-->
					<ul class="col-md-5 list-group pr-0">
						<li class="list-group-item border-0 bg-light">品种：英国短毛猫</li>
						<li class="list-group-item border-0">姓名：陈多多</li>
						<li class="list-group-item border-0">年龄：1岁2个月</li>
						<li class="list-group-item border-0">性别：男</li>
						<li class="list-group-item border-0">颜色：蓝白</li>
						<li class="list-group-item border-0">特征：社恐猫，不爱讲话，小吃货</li>
						<li class="list-group-item border-0">生育情况：已绝育</li>
						<li class="list-group-item border-0">
							<!--按钮-->
							<button class="btn btn-info"><a href="">立即查看</a></button>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--选项卡导航板块-->
		<ul class="nav nav-tabs">
			<!--导航条目-->
			<li class="nav-item">
				<a class="nav-link" active href="#tips" data-toggle="tab">
					<h6>养猫注意事项</h6>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#comments" data-toggle="tab">
					<h6>心得分享</h6>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#toys" data-toggle="tab">
					<h6>小猫玩具</h6>
				</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#food" data-toggle="tab">
					<h6>小猫零食</h6>
				</a>
			</li>
		</ul>
		<!--选项卡内容，淡入淡出动画-->
		<div class="tab-content border border-top-0 pb-2">
			<div class="tab-pane fade show active" id="tips">
				<div class="list-group pt-4">
					<div class="list-group-item border-0">
						<h6><span class="bg-primary text-light rounded-circle p-2">A1</span></h6>
						<div class="border-left border-primary ml-3 pl-3 pb-1">
							<h4>不要给猫咪喝牛奶</h4>
							<p>大部分猫咪对牛奶中的乳糖不耐受，饮用牛奶后可能会因消化不良而腹泻。此外，部分猫咪可能会对牛奶中的蛋白过敏，而出现呕吐、腹泻、皮肤红疹。</p>
						</div>
					</div>
					<div class="list-group-item border-0 py-0">
						<h6><span class="bg-primary text-light rounded-circle p-2">A2</span></h6>
						<div class="border-left border-primary ml-3 pl-3 pb-1">
							<h4>猫咪到家准备一个安静环境</h4>
							<p>对待刚到家的小猫咪，一定不要太过着急的去抱它和玩它，特别是有小孩的一定要看好，因为它还不太熟悉环境，可能会害怕的乱抓乱咬。最好给它时间适应环境。暂时不要打扰。</p>
						</div>
					</div>
					<div class="list-group-item border-0">
						<h6><span class="bg-primary text-light rounded-circle p-2">A3</span></h6>
						<div class="border-left border-primary ml-3 pl-3 pb-1">
							<h4>做好防护工作</h4>
							<p>一定要将家里阳台，窗户用纱网关上，预防猫咪从阳台跌落，猫不是不怕高的。</p>
						</div>
					</div>
					<div class="list-group-item border-0">
						<h6><span class="bg-primary text-light rounded-circle p-2">A4</span></h6>
						<div class="border-left border-primary ml-3 pl-3 pb-1">
							<h4>猫咪不吃饭</h4>
							<p>猫咪刚到一个新家有可能出现食欲不振、乱跑乱叫、躲避主人的一些行为，这些都是属于正常应激反应。等待它适应几天就可以了。</p>
						</div>
					</div>
					<div class="list-group-item border-0">
						<h6><span class="bg-primary text-light rounded-circle p-2">A5</span></h6>
						<div class="border-left border-primary ml-3 pl-3 pb-1">
							<h4>猫咪犯错绝对不能实行体罚</h4>
							<p>如果随便得打猫它会对主人产生恐惧感，进而产生卑屈的性格。因为猫的身体比人小的多，所以被打很可能会受伤，一定不要使用暴力。这是和猫咪相处的基础，必须建立在彼此互信上。
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="comments">
				<div class="list-group list-group-flush">
					<div class="list-group-item d-flex">
						<div>
							<!--web字体图标-->
							<i class="bi bi-person-fill text-primary ml-2" style="font-size: 1.2rem;"></i>
							<div>user1</div>
						</div>
						<div class="flex-grow-1 pl-3">
							<p>非常可爱，好会吃啊啊啊啊</p>
							<small>2019-8-5</small>
						</div>
					</div>
					<div class="list-group-item d-flex">
						<div>
							<i class="bi bi-person-fill text-primary ml-2" style="font-size: 1.2rem;"></i>
							<div>user2</div>
						</div>
						<div class="flex-grow-1 pl-3">
							<p>好可爱！！他真会空翻！我真没开玩笑！</p>
							<small>2023-4-11</small>
						</div>
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="toys">
				<ul class="list-group-item border-0">1.逗猫棒 25.00¥</ul>
				<ul class="list-group-item border-0">2.猫抓板 11.99¥</ul>
				<ul class="list-group-item border-0">3.毛线球 10.00¥</ul>
				<ul class="list-group-item border-0">4.剑麻球 17.25¥</ul>
				<ul class="list-group-item border-0">5.不倒翁逗猫棒 60.00¥</ul>
				<ul class="list-group-item border-0">6.猫薄荷球 13.6¥ </ul>
			</div>
			<div class="tab-pane fade" id="food">
				<ul class="list-group-item border-0">1.猫粮</ul>
				<ul class="list-group-item border-0">2.冻干</ul>
				<ul class="list-group-item border-0">3.猫条</ul>
				<ul class="list-group-item border-0">4.罐头</ul>
				<ul class="list-group-item border-0">5.猫薄荷</ul>
			</div>
		</div>


		<footer class="text-right">
			<p>xxxx公安局</p>
			<p>审批 粤xxxxxx号</p>
		</footer>
	</body>
</html>
<script src="Boostrap/js/jquery-3.6.0.min.js"></script>
<script src="Boostrap/js/bootstrap.bundle.min.js"></script>
<script src="Boostrap/js/tourSite.menu.js"></script>
